<template lang="html">
  <div class="main bg">
    <div class="main-top">
      <div class="head-left">
        <div class="title">
          <!-- 标题 -->
          <div class="title-city">禁毒智能化管理服务预警平台</div>
          禁毒大数据展示系统
        </div>
      </div>
      <div class="head-right">
        <div class="times">
          <!-- 时间 -->
          <div class="times-time">
            {{time}}
          </div>
          <div class="times-date">
            {{date}}
          </div>
        </div>
        <div class="weather">
          <!-- 天气 -->
          <img :src="waether.img">
          <span>{{waether.text}}</span>
        </div>
      </div>
    </div>
    <div class="main-body">
      <div class="menu menu-img2" @click="goto('stat/index')">
        <!-- 大菜单 -->
        <img src="../../assets/btn_xfzs.png">
        <div class="menu-title">
          吸毒人员
        </div>
        <div class="menu-disc">
          全市吸毒人员情况
        </div>
      </div>
      <div class="menu" v-for="(ms, i) in menus" :key="i">
        <!-- 小菜单 -->
        <div class="menu-item menu-img" v-for="(m, j) in ms" :key="i+ '_' + j" @click="goto(m.path)">
          <img :src="m.src">
          <div class="menu-title">
            {{m.title}}
          </div>
          <div class="menu-disc">
              {{m.disc}}
          </div>
        </div>
      </div>
    </div>
    <div class="shine shine2" style="top: 20px; left: 50%"></div>
    <div class="shine shine2" style="top: 20px; left: 100px"></div>
    <div class="shine shine2" style="top: 30px; right: 100px"></div>
    <div class="shine shine2" style="top: 230px; right: 87px"></div>
    <div class="shine shine2" style="top: 40px; left: 50px"></div>
    <div class="shine shine2" style="top: 420px; left: 89px"></div>
  </div>
</template>

<script>
// import {getWeather} from '@/common/api';
export default {
  data () {
    return {
      // fullHeight: document.documentElement.clientHeight,
      now: '',
      waether: {
        img: require('../../assets/pic_weather.png'),
        text: '晴 10℃'
      },
      menus: [
        [
          {
            name: '1',
            src: require('@/assets/btn_rkjg.png'),
            path: 'warn/index',
            title: '人员集聚预警',
            disc: '全市吸毒人员管控情况'
          }, {
            name: '2',
            src: require('@/assets/btn_wygl.png'),
            path: 'stat/ysdwp',
            title: '易涉毒物品',
            disc: '各区易涉毒物品管控情况'
          }
        ], [
          {
            name: '3',
            src: require('@/assets/btn_yyjh.png'),
            path: 'warn/buy',
            title: '药物滥用预警',
            disc: '非法购买麻精药品预警'
          }, {
            name: '4',
            src: require('@/assets/btn_hlw+zw.png'),
            path: 'fore/index',
            title: '复吸预测',
            disc: '吸毒人员复吸趋势预测'
          }
        ]
      ]
    };
  },
  methods: {
    goto (pathName) {
      this.$router.push(`/${pathName}`);
    },
    getWaether () {
      // getWeather({code: 101020100}).then(res => {
      //   console.log(res);
      //   let w = res.data.weather;
      //   let img = '';
      //   if (w.indexOf('晴') !== -1) {
      //     img = 'tq-01';
      //     if (w.indexOf('云') !== -1) {
      //       img = 'tq-02';
      //     }
      //   } else if (w.indexOf('雨') !== -1) {
      //     img = 'tq-05';
      //     if (w.indexOf('大雨') !== -1) {
      //       img = 'tq-06';
      //     }
      //   } else if (w.indexOf('多云') !== -1) {
      //     img = 'tq-03';
      //   } else if (w.indexOf('雪') !== -1) {
      //     img = 'tq-08';
      //     if (w.indexOf('大雪') !== -1) {
      //       img = 'tq-09';
      //     }
      //   } else if (w.indexOf('电') !== -1) {
      //     img = 'tq-07';
      //   } else if (w.indexOf('阴') !== -1) {
      //     img = 'tq-04';
      //   }
      //   this.waether.img = require(`../../assets/${img}.png`);
      //   this.waether.text = `${res.data.weather} ${res.data.text}`;
      // }).catch(err => {
      //   console.log(err);
      // });
    }
  },
  computed: {
    date () {
      if (!this.now) {
        return '';
      }
      return `${this.now.y}/${this.now.M}/${this.now.d} ${this.now.week}`;
    },
    time () {
      if (!this.now) {
        return '';
      }
      return `${this.now.h}:${this.now.m}`;
    }
  },
  created () {
    let fm = n => {
      return n < 10 ? `0${n}` : n;
    };
    let runtime = _ => {
      let now = new Date();
      let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.now = {
        'y': now.getFullYear(),
        'M': fm(now.getMonth() + 1),
        'd': fm(now.getDate()),
        'h': fm(now.getHours()),
        'm': fm(now.getMinutes()),
        's': fm(now.getSeconds()),
        'week': week[now.getDay()]
      };
    };
    runtime();
    setInterval(runtime, 1000);
  },
  mounted () {
    // window.addEventListener('resize', () => {
    //   this.fullHeight = document.documentElement.clientHeight;
    // });
    this.getWaether();
  }
};
</script>

<style lang="css" scoped>
.main {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-align: center;
  .main-top {
    width: 70%;
    height: 15%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: #fff;
    .head-left {
      height: 80%;
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      .title {
        text-align: left;
        font-size: 30px;
        margin-left: 20px;
        border-left: 6px solid #fff;
        padding-left: 20px;
        .title-city {
          font-weight: 700;
          font-size: 33px;
        }
      }
    }
    .head-right {
      flex: 1;
      height: 80%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      .times {
        font-size: 16px;
        width: 150px;
        text-align: center;
        .times-time {
          font-family: impact;
          font-size: 50px;
          color: rgba(255,255,255,.9);
        }
      }
      .weather {
        width: 100px;
        height: 100%;
        position: relative;
        img {
          height: 70%;
          width: auto;
          margin-top: 0px;
        }
        span {
          position: absolute;
          display: block;
          bottom: 0px;
          height: 20px;
          line-height: 20px;
          width: 100%;
          text-align: center;
          font-size: 16px;
        }
      }
    }
  }
  .main-body {
    position: relative;
    width: 70%;
    display: flex;
    flex-direction: row;
    .menu {
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .menu-img {
        position: relative;
        transition: all 1s;
        .menu-title {
          cursor:default;
          position: absolute;
          bottom: 45%;
          left: 28px;
          font-size: 24px;
          color: #2ecaa8;
          font-weight: 600;
        }
        .menu-disc {
          cursor:default;
          position: absolute;
          bottom: 32%;
          left: 30px;
          font-size: 14px;
          color: #aaa;
        }
    }
    .menu-img:hover:before{
            transition: all 1.2s;/*过渡,改变闪光的位置*/
            width: 90%;
            height: 85%;
    }
    .menu-img:hover {
      transition: all 1s;
      transform:scale(1.05,1.05);
    }
    .menu-img:before{/*在图片之前插入闪光*/
        content: '';
        position: absolute;
        width: 0px;
        height: 85%;
        left: 15px;
        top: 3px;
        overflow: hidden;
        background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
    }

    .menu-img2 {
        position: relative;
        transition: all 1s;
        .menu-title {
          cursor:default;
          position: absolute;
          bottom: 26%;
          left: 40px;
          font-size: 35px;
          color: #2ecaa8;
          font-weight: 600;
        }
        .menu-disc {
          cursor:default;
          position: absolute;
          bottom: 18%;
          left: 40px;
          font-size: 16px;
          color: #999;
        }
    }
    .menu-img2:hover:before{
            transition: all 1s;/*过渡,改变闪光的位置*/
            width: 90%;
            height: 92%;
    }
    .menu-img2:hover {
      transition: all 1s;
      transform:scale(1.05,1.05);
    }

    .menu-img2:before{/*在图片之前插入闪光*/
        content: '';
        position: absolute;
        width: 0px;
        height: 92%;
        left: 15px;
        top: 3px;
        overflow: hidden;
        background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
    }
  }
}

.shine {
position: absolute;
background-image: url(../../assets/shine.png);
background-repeat: no-repeat;
width: 155px;
background-position: center;
height: 155px;
background-size: 10% 10%;
animation: opacity-change 1s ease-in-out infinite;
-webkit-animation: opacity-change 1s ease-in-out infinite;
-moz-animation: opacity-change 1s ease-in-out infinite;
-o-animation: opacity-change 1s ease-in-out infinite;
}

.shine2 {
animation: opacity-change 1.75s ease-in-out infinite;
-webkit-animation: opacity-change 1.75s ease-in-out infinite;
-moz-animation: opacity-change 1.75s ease-in-out infinite;
-o-animation: opacity-change 1.75s ease-in-out infinite;
}

@keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@-webkit-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
